<template>
  <div>
    <div class="test_buttons">
      <el-button type="primary" round @click="get_user_info()">
        Get User Info
      </el-button>
      <el-button type="primary" round @click="get_others_info()">
        Get Other's Info
      </el-button>
      <el-button type="primary" round @click="add_others_todo()">
        add Other's todo
      </el-button>
    </div>
  </div>
</template>

<script>
  import { getUserInfo, getOthersInfo } from "../api/user"
  import { get_user_name } from "../utils/decode_jwt"
  import request from "../utils/request"

  export default {
    name: "TestButtons",
    methods: {
      graphql_request(data) {
        return {
          url: "/request",
          method: "post",
          headers: {
            "Content-Type": "application/graphql",
            "X-Todo-App-Auth": this.$store.getters.getToken,
          },
          data,
        }
      },
      get_user_info() {
        var user_name = get_user_name()
        if (user_name != "") {
          getUserInfo(user_name)
            .then((res) => {
              // console.log("res:", res)
              if (res.data.errors != undefined) {
                res.data.errors.forEach((error) => {
                  this.$message.error(error)
                })
              } else {
                this.$message.success(
                  "user info: " + JSON.stringify(res.data.data.queryUser)
                )
              }
            })
            .catch((error) => {
              console.log("get user info meet error: " + error)
            })
        } else {
          this.$message.error("Can't get token, please login first!")
        }
      },

      get_others_info() {
        // befor this, you should add an user named "others" first, this show you that
        // you can't query others information with @auth directive of "type User"
        getOthersInfo()
          .then((res) => {
            // console.log("res:", res)
            if (res.data.errors != undefined) {
              res.data.errors.forEach((error) => {
                this.$message.error(error)
              })
            } else {
              this.$message.warning(
                "user info: " +
                  JSON.stringify(res.data.data.queryUser) +
                  ", So, you can't query other's information"
              )
            }
          })
          .catch((error) => {
            console.log("get user info meet error: " + error)
          })
      },

      add_others_todo() {
        var addTodo = (content) => {
          var user_name = "others"
          var data = `mutation{
            addTodo(input:[
              {
                content: "${content}",
                done: false,
                owner: {name:"${user_name}"}
              }
            ]) {
              todo {
                id
                content
                done
              }
            }
          }`

          return request(this.graphql_request(data))
        }

        addTodo("others todo")
          .then((res) => {
            //console.log("res", res)
            if (res.data.errors != undefined) {
              //infer that query syntax may have something error
              res.data.errors.forEach((error) => {
                console.log("dgraph addTodo error: " + error.message)
                this.$message.error("dgraph addTodo error: " + error.message)
              })
            } else if (res.data.data.addTodo == null) {
              console.log("we can't add others todo")
              this.$message.warning("we can't add others todo")
            } else {
              // this_todo is like {content: xxx, done: xxx, id: xxx}
              console.log("add others todo success")
              this.$message.success("add others todo success")
            }
          })
          .catch((error) => {
            console.log("add todo error:", error.message)
            this.$message.error("add todo error")
          })
      },
    },
  }
</script>

<style>
  .test_buttons {
    padding-bottom: 2em;
  }
</style>
